<template>
<div id="detail">
		<div id="detailHeader">
			<p class="iconfont icon-fanhui" @click="test()"></p>
			<div class="dh-right">
				<p class="iconfont icon-shoucang"></p>
				<p class="iconfont icon-fenxiang"></p>
			</div>
			<!--详情电影头部-->
			<div class="detailImg">
				<img :src="detailimg" class="imgtitle"/>
				<h2 class="titleCn">{{detailCn}}</h2>
				<h2 class="titleEn">{{detailEn}}</h2>
				<p class="runTime">{{runTime}}</p>
				<span class="rating">{{rating}}</span>
				<div class="typebox">
					<p v-for="item in type" class="type">{{item}}     /</p>
				</div>
				<div class="releasebox">
					<p v-for="time in release" class="release">{{time}} 上映</p>
				</div>
				<strong class="see">我想看</strong>
				<strong class="want">我要评分</strong>
			</div>
			<div class="commonSpecial">
				{{commonSpecial}}
			</div>
			<!--查询按钮-->
			<input type="button" name="btn" id="btn" value="查影讯 / 购票" />
			<p class="bgground"></p>
			<div class="wordDetail">
				<p class="word" id="word">{{content}}</p>
				<p class="iconfont icon-xia" id="down"></p>
				<p class="iconfont icon-shang1" id="top1"></p>
			</div>
			<p class="baseline"></p>
			<p class="basecenter"></p>
			<p class="basedown"></p>
			<!--演员表-->
			<div class="actious">
				<h2 class="aTitle">{{showCinemaCount}}位演职员  <span class="iconfont icon-you"></span></h2>
				<dl class="director">
					<dt>导演</dt>
					<img :src="director.directorImg" class="dirimg"/>
					<h3 class="dirname">{{director.directorName}}</h3>
					<h4 class="dirnameen">{{director.directorNameEn}}</h4>
				</dl>
				<dl class="actorList">
					<dt>主要演员</dt>
					<div class="actone">
						<img :src="actorList.actorImg" class="actimg"/>
						<h3 class="actname">{{actorList.actor}}</h3>
						<h4 class="actnameen">{{actorList.actorEn}}</h4>
						<h5 class="actrole">{{actorList.roleName}}</h5>
					</div>
					<div class="acttwo">
						<img :src="actorListT.actorImg" class="actimgt"/>
						<h3 class="actnamet">{{actorListT.actor}}</h3>				
						<h4 class="actnameent">{{actorListT.actorEn}}</h4>
						<h5 class="actrolet">{{actorListT.roleName}}</h5>
					</div>
				</dl>
			</div>
			<!--分割线-->
			<p class="excision"></p>
			<!--剧照-->
			<div class="imageCount">
				<h2 class="aimageCount">{{imageCount}}张图片  <span class="iconfont icon-you"></span></h2>
				<img :src="images[0]" style="margin-left: 15px;"/>
				<img :src="images[2]"/>
				<img :src="images[3]"/>
				<img :src="images[3]"/>
			</div>
			<!--分割线-->
			<p class="excision"></p>
		</div>
		<!--精选影评-->
		<div class="assess">
			<h2 class="assesstitle">精选影评（{{totalCount}} ） <span class="iconfont icon-you"></span></h2>
			<h3 class="titlecont">{{comments.title}}</h3>
			<p class="detailcont">{{comments.content}}</p>
			<dl>
				<dt><img :src="comments.headurl"/></dt>
				<dd>
					<p>{{comments.nickname}}</p>
					<p>{{comments.modifyTime}}</p>
				</dd>
			</dl>
		</div>
		<p class="excision"></p>
		<img src="~@/assets/donw.jpg" style="width:375px;height:150px;margin-bottom: 20px;">
		<p class="excision"></p>
		<!--影视评论-->
			<div class="moviesevaluate">
				<h2 class="moviesevaluatetitle">网友评论（{{totalCommentCount}} ） <span class="iconfont icon-you"></span></h2>
				<ul id="evaluatelist">
					<router-link v-for="(item, index) in cts" to="item" :key="index" tag="li">
						<dl>
							<dt><img :src="item.caimg" /></dt>
							<dd>
								<p>{{item.ca}}</p>
								<p>评价<span>{{item.cr}}</span></p>
								<p>{{item.ce}}</p>
							</dd>
						</dl>
					</router-link>
				</ul>
				
			</div>
		
		<span class="iconfont icon-shang" id="top" @click="tophide()" style="position:fixed;display:none;right:10px;bottom: 60px;width:40px;height:40px;font-size:30px;background:rgba(96,96,96,.4);border-radius: 20px;line-height:40px;text-align: center;color:#fff;"></span>
		
		<div id="sendword">
			<input type="text" name="tex" id="tex" value="" placeholder="说点什么吧"/>
			<input type="button" name="btn1" id="btn1" value="发送" />
		</div>
</div>
</template>

<script>
	import $ from "jquery";
	import MyAjax from "@/md/MyAjax.js"
	import footerToggle from "@/md/footerToggle.js"
	import headerToggle from "@/md/headerToggle.js"
	export default{
		data(){
			return{
				detailimg:[],
				detailCn:{},
				detailEn:{},
				runTime:{},
				rating:{},
				type:{},
				release:{},
				commonSpecial:{},
				content:{},
				showCinemaCount:{},
				director:{},
				actorList:{},
				actorListT:{},
				imageCount:{},
				images:{},
				totalCount:{},
				comments:{},
				advList:{},
				totalCommentCount:{},
				cts:{}
			}
		},
		mounted(){
			footerToggle.show();
			headerToggle.hide();
			console.log(this.$route.params.classid);
			var classID = this.$route.params.classid;
			var that = this;
			//详情下拉
			$('#down').click(function(){
				$('#word').css({
					height:"auto",
					display:"block",
					overflow:"auto"
				})
				$(this).css('display',"none");
				$('#top1').css('display','block');
			})
			$('#top1').click(function(){
				$('#word').css({
					overflow:"hide",
					display: '-webkit-box',
					'-webkit-box-orient': 'vertical',
					'-webkit-line-clamp': '2'
				})
				$(this).css('display','none');
				$('#down').css('display','block');
			})
			
			//影片详情
			var obj= {
				type:"get",
				url:"http://10.8.154.144:3000/detail?movieId="+classID,
				data:{}
			}
			MyAjax.ajax(obj,function(data){
//				console.log(data)
				that.detailimg = data.image;//图片
				//console.log(that.detailimg)
				that.detailCn = data.titleCn;//中文
				that.detailEn = data.titleEn;//英文
				that.runTime = data.runTime;//播放时间
				that.rating = data.rating;//评分
				that.type = data.type;//类型
				that.release = data.release;//上映时间
				that.commonSpecial = data.commonSpecial;//一句话介绍
				that.content = data.content;//内容
				that.showCinemaCount = data.showCinemaCount;//演员表
				that.director = data.director;//演员表
				that.actorList = data.actorList[0];//演员表
				that.actorListT = data.actorList[1];//演员表
				that.imageCount = data.imageCount;//剧照
				that.images = data.images;//剧照
				$('#detailHeader').css({
					//jq中给图片设置大小的，位置，平铺backgroundSize:"375px 200px",
					background:"url("+data.image+")",
					backgroundPosition:"top",
					backgroundSize:"375px ",
					backgroundRepeat:"no-repeat"
				})
			},function(err){
				console.log(err)
			})
			
			
			//热门话题
			var obj= {
				type:"get",
				url:"http://10.8.154.144:3000/list?movieId="+classID,
				data:{}
			}
			MyAjax.ajax(obj,function(data){
				that.comments = data.comments[0];
				that.totalCount = data.totalCount;
//				console.log(data)
			},function(err){
				console.log(err)
			})
			
			
			
			//影评
			var obj= {
				type:"get",
				url:"http://10.8.154.144:3000/listassess?movieId="+classID,
				data:{}
			}
			MyAjax.ajax(obj,function(data){
				that.totalCommentCount = data.totalCommentCount;
				that.cts = data.cts;
			
				console.log(data.cts)
			},function(err){
				console.log(err)
			})
			
			
			//滚动事件
			document.addEventListener('scroll',function(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 				if(scrollTop>300){ 
					document.getElementById("top").style.display = "block"; 
				}else{
					document.getElementById("top").style.display = "none";
				};
			})
			
		},
		methods:{
			test(){
				window.history.go(-1);
			},
			tophide(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
				if(scrollTop>300){
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}else{
					document.getElementById("top").style.display = "none";
				}
		}
		},
		components:{
			
		}
	}
</script>

<style scoped lang="scss">
@import "~@/scss/main.scss";
#detail{
	overflow:auto;
/*头部信息*/
 #detailHeader{
 	@include rect(100%, 1.53rem);
 	box-shadow:10px 10px 400px 70px #ddd inset;
 	.icon-fanhui{
 		color:#fff;
 		float:left;
 		font-size: 24px;
 		margin:12px;
 	}
 	.dh-right{
 		float:right;
 		.icon-shoucang{
 			float:left;
 			color:#fff;
 			font-size:26px;
 			margin:10px;
 		}
 		.icon-fenxiang{
 			float:right;
 			color:#fff;
 			font-size:26px;
	 		margin:10px;
 		}
 	}
 	
 }
 
 /*电影详情*/
.detailImg{
	@include rect(100%, auto);
	float:left;
	position:relative;
	.imgtitle{
		width:126px;
		height:189px;
		margin:20px 0 0 20px;
		float:left;
	}
	.titleCn{
		float:left;
		margin:25px 0 0 10px;
		font-size:20px;
		color:#fff;
		text-shadow: 0 0 5px red;
		width:55%;
	}
	.titleEn{
		float:left;
		margin:0 0 0 10px;
		font-size:16px;
		color:#fff;
		text-shadow: 0 0 5px yellow;
		width:55%;
		overflow: hidden;
   		white-space: nowrap;
    	text-overflow:ellipsis;
	}
	.runTime{
		width:55%;
		text-indent: 20px;
		float:left;
		font-size:16px;
		font-weight: 900;
		margin-top:15px;
	}
	.rating{
		@include rect(0.37rem, 0.37rem);
		float:left;
		position:absolute;
		right:20px;
		top:74px;
		background:#659D0E;
		color:#fff;
		text-align: center;
		line-height:38px;
		font-size:16px;
		border-radius:10px;
	}
	.typebox{
		@include rect(60%,auto);
		float:left;
		margin-top:5px;
		.type{
		float:left;
		width:auto;
		font-size:16px;
		font-weight: 900;
		text-indent: 10px;
	}
	}
	.releasebox{
		@include rect(60%,auto);
		float:left;
		margin-top:5px;
	.release{
		text-indent: 5px;
		float:left;
		width:auto;
		height:28px;
		overflow: hidden;
		font-size:14px;
		font-weight: 900;
	}
	}
	.see{
		float:left;
		width:100px;
		height:40px;
		border:1px solid #ddd;
		text-align: center;
		line-height: 40px;
		border-radius: 10px;
		color:#666;
		font-size:16px;
		font-weight: 100;
		margin-left:10px;
	}
	.want{
		float:left;
		width:100px;
		height:40px;
		border:1px solid #659D0E;
		text-align: center;
		line-height: 40px;
		border-radius: 10px;
		color:#659D0E;
		font-size:16px;
		font-weight: 100;
		margin-left:10px;
	}
}

.commonSpecial{
	float:left;
	margin-top:10px;
	font-size:20px;
	color:#FD8900;
	width:100%;
	text-align: center;
}

#btn{
	@include rect(3.39rem,0.48rem);
	float:left;
	background:#FD8900;
	border:0;
	font-size:20px;
	color:#fff;
	border-radius: 30px;
	margin: 10px 18px 40px ;
	font-weight: 900;
}
.bgground{
	@include rect(100%, 0.15rem);
	background:#F6F6F6;
	float:left;
}
.wordDetail{
	float:left;
	font-size:18px;
	overflow: auto;
	.word{
		width:375px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.icon-xia{
		width:100%;
		text-align: center;
	}
	#top1{
		text-align: center;
		display: none;
	}
	
}
.baseline{
	@include rect(100%, 0.15rem);
	background:#F6F6F6;
	float:left;
}
.basecenter{
	@include rect(100%, 0.15rem);
	background:#fff;
	float:left;
}
.basedown{
	@include rect(100%, 0.15rem);
	background:#F6F6F6;
	float:left;
}

/*演员表样式*/
.actious{
	float:left;
	@include rect(100%, auto);
	margin-bottom: 10px;
	.aTitle{
		margin-top:10px;
		text-indent: 10px;
		width:100%;
		font-size:20px;
		margin-bottom: 10px;
		.icon-you{
			float:right;
			margin-right:20px;
		}
	}
	.director{
		@include rect(1.1rem,auto);
		margin-left: 10px;
		padding-bottom: 30px;
		float:left;
		border-right:#ccc solid 1px;
		dt{
			font-weight: 900;
		}
		.dirimg{
			width:100px;
			height:136px;
			margin-bottom: 20px;
		}
	}
	.actorList{
		@include rect(2.4rem,auto);
		margin-left: 10px;
		float:left;
		.actone,.acttwo{
			float:left;
			margin-left:10px;
			height:auto;
			.actimg,.actimgt{
			width:100px;
			height:120px;
			margin-bottom: 10px;
		}
			.actname,.actnameen,.actnamet,.actnameent{
				width:100px;
				overflow: hidden;
		   		white-space: nowrap;
		    	text-overflow:ellipsis;
			}
		}
		.actrolet,.actrole{
			margin-top:40px;
			text-align: center;
		}
	}
}
.excision{
	@include rect(100%, 0.15rem);
	background:#F6F6F6;
	float:left;
}
/*剧照*/
.imageCount{
	float:left;
	@include rect(100%, auto);
	padding-bottom: 20px;
	.aimageCount{
		margin-top:10px;
		text-indent: 10px;
		width:100%;
		font-size:20px;
		margin-bottom: 10px;
		.icon-you{
			float:right;
			margin-right:20px;
		}
	}
	img{
		@include rect(0.79rem, 0.79rem);
		float:left;
		margin:5px;
	}
}
/*影评*/
.assess{
	float:left;
	@include rect(100%, auto);
	padding-bottom: 20px;
	.assesstitle{
		margin-top:10px;
		text-indent: 10px;
		width:100%;
		font-size:20px;
		margin-bottom: 10px;
		.icon-you{
			float:right;
			margin-right:20px;
		}
	}
	.titlecont{
		font-size:20px;
	}
	.detailcont{
		margin:10px 0;
	}
	dl{
		dt{
			img{
				float:left;
				margin-left:10px;
				width:60px;
				height:60px;
				border-radius: 30px;
			}
		}
		dd{
			p{
				float:left;
				width:70%;
				margin-left:20px;
				font-size:16px;
				text-align: center;
			}
		}
	}
}

/*网友评论*/
.moviesevaluate{
	float:left;
	@include rect(100%, auto);
	padding-bottom: 20px;
	.moviesevaluatetitle{
		margin-top:10px;
		text-indent: 10px;
		width:100%;
		font-size:20px;
		margin-bottom: 10px;
		.icon-you{
			float:right;
			margin-right:20px;
		}
	}
	#evaluatelist{
		@include rect(100%, auto);
		li{
			@include rect(100%, auto);
			dl{
				@include rect(100%,100px);
				dt{
					@include rect(20%,100%);
					float:left;
					img{
						float:left;
						margin:10px;
						width:40px;
						height:40px;
						border-radius: 20px;
					}
				}
				dd{
					@include rect(80%,100%);
					float:left;
					p{
						float:left;
						width:80%;
						
					}
					P:nth-child(1){
						width:auto;
					}
					P:nth-child(2){
						float:right;
						width: auto;
						span{
							float:right;
							width:30px;
							height:20px;
							background: #659D0E;
							color:#fff;
							text-align: center;
							line-height: 20px;
							border-radius: 5px;
						}
					}
					p:nth-child(3){
						width:80%;
						width:auto;
						margin-right:20px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
			}
		}
	}
}
#sendword{
	@include rect(100%, 0.5rem);
	position:fixed;
	bottom: 0;
	background: #F6F6F6;
	#tex{
		float:left;
		border: 1px solid #bababa;
	    background: #fff;
	    border-radius: 3px;
	    width: 70%;
	    height:40px;
	    padding-top: 5px;
	    padding-bottom:5px;
	    margin:5px 10px 0 10px;
	}
	#btn1{
		width:20%;
		float:left;
		height:40px;
		border: 1px solid #bababa;
		background:#fff;
		margin:5px 0 0 0;
	}
}
}
</style>